<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Console procedure')"></h3>
    </template>
    
    <!-- 过程选择 -->
    <el-row :gutter="8" style="align-items: center;">
      <el-col :span="4">
        <span v-text="t('Procedure') + ':'"></span>
      </el-col>
      <el-col :span="16">
        <el-select 
          v-model="procedureStore.selectedProcedureId"
          @change="procedureStore.selectProcedure"
          style="width: 100%;"
        >
          <el-option 
            v-for="procedure in procedureStore.procedureList" 
            :key="procedure.id" 
            :label="procedure.title"
            :value="procedure.id"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button 
          type="primary" 
          @click="procedureStore.runProcedure"
          :disabled="!procedureStore.canRunProcedure"
          style="width: 100%;"
        >
          {{ t('Run') }}
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>
  
  <script setup>
  import { onMounted } from 'vue'
  import { useConsoleProcedureStore } from '@/stores/consoleProcedure'
  import { useLanguageStore } from '@/stores/language'
  
  const procedureStore = useConsoleProcedureStore()
  const languageStore = useLanguageStore()
  
  // 翻译函数
  const t = (key) => {
    const translations = {
      'Console procedure': {
        'en': 'Console procedure',
        'zh': '控制台过程'
      },
      'Procedure': {
        'en': 'Procedure',
        'zh': '过程'
      },
      'Run': {
        'en': 'Run',
        'zh': '运行'
      }
    }
    return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
  }
  
  onMounted(() => {
    procedureStore.initializeProcedurePanel()
  })
  </script> 